<template>
    <a-list class="comment-list" :header="`${data.length} replies`" item-layout="horizontal" :data-source="data">
        <a-list-item slot="renderItem" slot-scope="item, index">
            <a-comment :author="item.author" :avatar="item.avatar">
                <template slot="actions">
                    <span v-for="action in item.actions">{{ action }}</span>
                </template>
                <p slot="content">
                    {{ item.content }}
                </p>
                <a-tooltip slot="datetime" :title="item.datetime.format('YYYY-MM-DD HH:mm:ss')">
                    <span>{{ item.datetime.fromNow() }}</span>
                </a-tooltip>
            </a-comment>
        </a-list-item>
    </a-list>
</template>
<script>
import moment from 'moment';
export default {
    data() {
        return {
            data: [
                {
                    actions: ['Reply to'],
                    author: '李涛',
                    avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
                    content:
                        '这个软件非常好',
                    datetime: moment().subtract(1, 'days'),
                },
                {
                    actions: ['Reply to'],
                    author: '杨宇',
                    avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
                    content:
                        '我也觉得',
                    datetime: moment().subtract(2, 'days'),
                },
            ],
            moment,
        };
    },
};
</script>
